<template>
  <!-- 分部分项-树下拉框查询 -->
  <a-tree-select v-bind="$attrs" v-on="$listeners" v-model="currentValue" :tree-data="treeData" allowClear showSearch   :multiple="isMultiple"
    treeDefaultExpandAll :maxTagCount="maxTagCount" :filterTreeNode="fillter"
    :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }" :show-checked-strategy="SHOW_CHILD"
    :placeholder="placeholder">
    <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
  </a-tree-select>
</template>
<script>
import { subItem } from '@/api/quality/currency' // api
import { TreeSelect } from 'ant-design-vue'
const SHOW_CHILD = TreeSelect.SHOW_CHILD
import { Ellipsis } from '@/components' // 表格

export default {
  name: 'SelectTreeSubItem',
  components: {
    Ellipsis
  },
  data() {
    return {
      fetching: false,
      isCanClear: !this.isEdit,
      treeData: [],
      dataList: [],
      SHOW_CHILD
    }
  },
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String, Object, Number]
    },
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      }
    },
    // 项目id
    projectId: {
      type: [String, Number],
      default: function () {
        return ''
      }
    },
    // 工程类别id
    typeId: {
      type: [String, Number],
      default: function () {
        return ''
      }
    },
    // 多选状态下,最大显示选项数
    maxTagCount: {
      type: Number,
      default: function () {
        return 2
      }
    },
    // 表单
    form: Object,
    // 是否初始化
    init: {
      type: Boolean,
      default: () => false
    },
    keyValue: {
      type: String,
      default: () => 'projectTypeId'
    },
    //如果是编辑，第一次不要重置绑定的值。。。。
    isEdit: {
      type: Boolean,
      default() {
        return false
      }
    },
    //是否禁用除末级以外节点
      fatherDisabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    //是多选
     isMultiple: {
      type: Boolean,
      default() {
        return false
      }
    },
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        let value = this.value
        if (this.$attrs?.labelInValue && (this.$attrs?.mode === 'multiple' || this.$attrs?.treeCheckable)) {
          value = this.value?.map((item) => ({ value: item, label: this.dataList?.find((i) => i.name === item)?.name }))
        }
        return value
      },
      set: function (value) {
        if (this.$attrs?.labelInValue && (this.$attrs?.mode === 'multiple' || this.$attrs?.treeCheckable)) {
          this.$emit(
            'update:labels',
            value.map((i) => i.label)?.join('，')
          )
          value = value.map((i) => i.value)
        }
        this.$emit('input', value)
      }
    },
    // 获取项目id和工程类别id
    ids() {
      const { projectId, typeId } = this;
      // const id = this.form?.[this.keyValue]
      return {
        projectId,
        typeId
        // id,
      }
    },
    attr() {
      return this.form?.[this.keyValue]
    }
  },
  watch: {
    // 监听项目id和工程类别id
    ids(e) {
      // 清空表单
      if (this.isClear) {
        this.currentValue = ''
      }
      // 清空表单
      if (this.isEdit && this.isCanClear) {
        this.currentValue = ''
        this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
      } else {
        this.isCanClear = true
      }
      // 重置列表
      this.treeData = []
      if (e.typeId || e.id || e.projectId) {
        this.getList()
      }
    },
    attr(val) {
      // 清空表单
      if (this.isClear) {
        this.currentValue = ''
      }
      // 清空表单
      if (this.isEdit && this.isCanClear) {
        this.currentValue = ''
        this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
      } else {
        this.isCanClear = true
      }
      // 重置列表
      this.treeData = []
      val && this.getList()
    }
  },
  methods: {
    /**
     * 筛选节点
     */
    fillter(searchVal, treeNode) {
      return treeNode?.data?.props?.label?.includes(searchVal)
    },
    /**
     * 获取单极全部节点
     */
    getData(data, disabled) {
      data.forEach((item) => {
        this.dataList.push(item)
        item.disabled = !item.enabled;
        item.disabled && (item.name = item.name + '(停用)')
        item.label = item.name
        // item.style = {color:'#ff3333'}
        // delete item.name
        // item.scopedSlots = { title: 'name' }
        if (item.children?.length > 0) {
          this.getData(item.children, item.disabled)
          if (this.fatherDisabled) {
            item.disabled = true
          }
        }
      })
    },
    /**
     * 获取树
     */
    getList() {
      // 获取下拉框列表
      let args = {
        sources: 0
      }
      // 项目id存在则添加
      this.projectId && (args.projectId = this.projectId)
      // 工程类别id存在则添加
      this.typeId && (args.id = this.typeId)
      this.form?.[this.keyValue] &&
        (args[this.keyValue === 'projectId' ? this.keyValue : 'id'] = this.form[this.keyValue])
      if (!args.id && !args.projectId) {
        return false
      }
      this.fetching = true
      subItem
        .getList(args)
        .then((res) => {
          this.fetching = false
          if (res.code == 200) {
            // console.log(this.flatten(res.data))
            this.getData(res.data)
            this.treeData = res.data[0]?.children // 暂时取第一个，后面会改版。加工程类别
            // this.currentValue = res.data[0]?.children[0]?.id ?? ''
          }
        })
        .catch((res) => {
          this.fetching = false
        })
    }
  },
  mounted() {
      if (this.init || this.projectId || this.typeId) {
        console.log(this.projectId,22222222)
      this.getList()
    }
  }
}
</script>
